
<template>
<div id="viewuser">
   
   <el-button-group  style="margin-bottom:20px;">
            <el-button @click="addUI" style="margin-left:190px;" type="success" icon="el-icon-edit"  >添加</el-button>
      
            </el-button-group>


  

   
   <el-button-group  style="margin-bottom:20px;">
     <el-date-picker
      v-model="datetime"

      type="month"
    @change="shearchdate"
      placeholder="选择月"
      value-format="yyyy-MM-dd"
      >
    </el-date-picker>
      
            </el-button-group>


             <el-button-group>
    <el-select v-model="shearchstuct"   @change="shearchstate" placeholder="请选择"  style="margin-bottom:20px;">
      
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      
    </el-option>
  </el-select>
   </el-button-group>


      <el-table
    :data="pagination.records"
    border
     :cell-style="rowstyle"
    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f5f7fa' }"
    style="width: 850px;margin-left:190px;">
    <el-table-column
      fixed
      prop="noticecontent"
      label="公告内容"
      width="150">
    </el-table-column>
    <el-table-column
      prop="noticestatus"
      label="展示"
      width="120">
    </el-table-column>
    <el-table-column
      prop="noticepublisher"
      label="发布者"
      width="120">
    </el-table-column>
    <el-table-column
      prop="noticepublishtime"
      label="发布时间"
      width="120">
    </el-table-column>
 
    <el-table-column
      fixed="right"
      label="操作"
      width="210"
     align="center">
      <template slot-scope="scope">
         <el-button type="primary"   @click="handleselect(scope.row)">查看</el-button>
        <el-button type="primary"   @click="handleupdate(scope.row)" >编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!--分页-->
     <el-pagination
      style="margin-left:190px;margin-top:20px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[1,2]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>

   <!--添加-->
<el-dialog title="添加公告信息" :visible.sync="addNotice">
  <el-form >
    <el-form-item label="公告内容" :label-width="formLabelWidth">
      <el-input v-model="notice.noticecontent" autocomplete="off"></el-input>
    </el-form-item>
 
    <el-form-item label="是否展示" :label-width="formLabelWidth">
   <el-radio-group v-model="notice.noticestatus" >
      <el-select v-model="notice.noticestatus" placeholder="请选择">
      
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      
    </el-option>
  </el-select>
    </el-radio-group>
    </el-form-item>
   
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="addNotice = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </div>
</el-dialog>


   <!--修改-->
<el-dialog title="修改公告信息" :visible.sync="updateNotice">
  <el-form >
    <el-form-item label="公告内容" :label-width="formLabelWidth">
      <el-input v-model="upnotice.noticecontent" autocomplete="off"></el-input>
    </el-form-item>

    <el-form-item label="是否展示" :label-width="formLabelWidth">
   <el-radio-group v-model="upnotice.noticestatus" >
      <el-select v-model="upnotice.noticestatus" placeholder="请选择">
      
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
      
    </el-option>
  </el-select>
    </el-radio-group>
    </el-form-item>
   
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updateNotice = false">取 消</el-button>
    <el-button type="primary" @click="update">确 定</el-button>
  </div>
</el-dialog>


  <el-dialog title="查询公告管理信息" :visible.sync="selectnotice" style="font-size:30px">
  <el-form >

  
     <el-form-item label="公告内容:" :label-width="formLabelWidth" style="font-size:25px">  
   
       <span>{{notice.noticecontent}}</span>
    </el-form-item>
 

     <el-form-item label="是否展示:" :label-width="formLabelWidth" style="font-size:25px">
      
        <span>{{notice.noticestatus}}</span>
    </el-form-item>

 

     <el-form-item label="发布者" :label-width="formLabelWidth" style="font-size:25px">
         <span>{{notice.noticepublisher}}</span>
    </el-form-item>

     <el-form-item label="发布时间" :label-width="formLabelWidth" style="font-size:25px">
         <span>{{notice.noticepublishtime}}</span>
    </el-form-item>

<el-form-item label="修改者" :label-width="formLabelWidth" style="font-size:25px">
         <span>{{notice.noticeupdatepeople}}</span>
    </el-form-item>

    <el-form-item label="修改时间" :label-width="formLabelWidth" style="font-size:25px">
         <span>{{notice.noticeupdatetime}}</span>
    </el-form-item>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancel2()">取 消</el-button>
    
  </div>
</el-dialog>

</div>
</template>
<script>
  export default {
    data() {
      return {
        //分页对象
       pagination:{},
       selectnotice:false,
      realname: this.$store.state.userList1[0].realName,
       //搜索日期date
       datetime:'',
       notice:{noticepublisher:this.$store.state.userList1[0].realName,},
       //添加的显示
       addNotice:false,
       //修改的显示
       updateNotice:false,
       //搜索条件状态
       shearchstuct:'',

      upnotice:{noticeupdatepeople:'',
        },


        formLabelWidth: '250px',

          //下拉框绑定值
          options:[

           {
             value:'是',
            label:'是'
           },
           {
             value:'否',
            label:'否'
           },
           
          ],

      };
    },
    methods: {


   find(page=1,size=3){
   var url="/notice/findnotice" ;
          var params=new URLSearchParams();
          params.append("current",page);
            params.append("size",size);
             params.append("noticepublishtime",this.datetime);
             params.append("noticestatus",this.shearchstuct);
          this.$axios.post(url,params).then(resp=>{
             
               this.pagination=resp.data;
          })
   },

   shearchstate(value){
     this.shearchstuct=value;
     this.find();
   },

   update(){
    var url="/notice/updatenotice" ;
         
           this.$axios.post(url,this.upnotice).then(resp=>{
           
          
            this.updateNotice = false;

            this.find();
               this.$message({
                   message:"修改成功",
                   type:'success'
               })
          })
   },

  //pageSize 改变时会触发回调参数每页条数
      handleSizeChange(size){
          this.find(this.pagination.current,size)

      },
      //currentPage 改变时会触发 回调参数当前页
      handleCurrentChange(page){
        this.find(page,this.pagination.size)
      },


     //添加入口
      addUI(){
        this.addNotice=true;
        },
      //添加方法 
     add(){
     var  url="/notice/addnotice";
          this.$axios.post(url,this.notice).then(resp=>{
            console.log(resp);
           console.log(this.notice);
          this.notice={}; 
            this.addNotice = false;
            this.find();
               this.$message({
                   message:"添加成功",
                   type:'success'
               })
          })
     },

   shearchdate(value){


    
    this.datetime=value;
    console.log( this.datetime);
    this.find();

   },

   rowstyle(){
       return "text-align: center" ;
       }
    
  ,

      handleselect(row){
      this.notice=row;
      this.selectnotice=true;
      },

      cancel2(){
       
      this.selectnotice=false;
      this.find();
     
    },




 
    //点击编辑
         handleupdate(row) {
     
       this.updateNotice=true;

      this.upnotice=row;
      this.upnotice.noticeupdatepeople = this.realname;
      }
    },
 

     mounted() {
        this.find();
    },

  };
</script>

<style scoped>
  #viewuser{
     margin-left: 50px;
    margin-top: 50px;
  }
</style>

